<template>
    <div class="flex timekepping-show flex-center-x flex-center-y">
        <!-- <div class="block" v-text="h"></div>
        <div class="gap">:</div>
        <div class="block" v-text="m"></div>
        <div class="gap">:</div>
        <div class="block" v-text="s"></div> -->
        <titleBar title="计时器" theme="dark" />  
        <div class="orderCard bgdark" v-if="orderAllInfo">
            <div class="top">
                <div class="name fz2">{{orderAllInfo.orderName}}</div>
                <div class="content flex fz4">
                    <div class="wordsGray">作图数量</div>
                    <div>{{orderAllInfo.pictureNum}}天</div>
                </div>
                <div>
                    <div class="content flex fz4">
                        <div class="wordsGray">初次上门</div>
                        <div>{{orderAllInfo.homeTime}}</div>
                    </div>
                    <div class="content flex fz4">
                        <div class="wordsGray">预约日期</div>
                        <div>{{orderAllInfo.appointmentTime.join('、')}}</div>
                    </div>
                    <div class="content flex fz4">
                        <div class="wordsGray">约定地点</div>
                        <div>{{orderAllInfo.address}}</div>
                    </div>
                </div>
            </div>
            <div class="rightimg">
                <img src="@/assets/img/performance/orderCard/doNow3.png" width="100%" />
            </div>
            <div class="msg" @click="go_chat">
                <div class="dot" v-if="groupUids && groupUids.includes(orderAllInfo.groupUid)">
                    <img src="@/assets/img/performance/orderCard/dot.png" width="100%" alt="">
                </div>
                <img src="@/assets/img/performance/orderCard/dark-message-icon.png" width="100%" alt="">
            </div>
        </div>
        <div class="title-name">{{
            !type ? '准备开启' :
            type === 'stop' ? '已暂停' :
            type === 'start' ? '计时中' :
            '准备开启'
        }}</div>
        <div class="flex timekepping-show flex-center-x flex-center-y">
            <div class="block" v-text="timekeepDate.h"></div>
            <div class="gap">:</div>
            <div class="block" v-text="timekeepDate.m"></div>
            <div class="gap">:</div>
            <div class="block" v-text="timekeepDate.s"></div>
        </div>
        <div class="flex handle-box" v-if="type">
            <div class="button b-stop" v-on:click="onstop" v-if="type === 'start'">暂停</div>
            <div class="button b-continue" v-on:click="oncontinue" v-if="type === 'stop'">继续</div>
            <div class="button b-done" v-on:click="done">完成</div>
        </div>
        <div v-else class="flex handle-box flex-center-x">
            <div class="button b-ready">待确认</div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['h', 'm', 's']
}
</script>
